<style type="text/css">
    .beritabox {
        height: 33em;
        width: 287px;
        padding: 0.5em 1em;
        display: inline-block;
        overflow: hidden;
        margin-bottom: -0.5em;
    }

    .beritaLists {
        background-color: #fbfaf3;
        border: 1px solid #d4ccb0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .page-bottom {
        margin-top: 1.1em;
    }
</style>
<div class="beritaLists">
    <span class="beritaboxes">
    </span>
    <div style="text-align: right; width: 99%; margin-bottom: 1em; margin-top: 1.4em;">
        Halaman :
        <a href="javascript:void(0);" onClick="javascript: $('.page-cur').text(parseInt($('.page-cur').text()) - 1);
                changePage();" class="page-prev"><<</a>
        <span class="page-cur">1</span>
        <a href="javascript:void(0);" onClick="javascript: $('.page-cur').text(parseInt($('.page-cur').text()) + 1);
                changePage();" class="page-next">>></a>
    </div>
</div>
<script type="text/javascript">

            jQuery(document).ready(function() {
                $(".dtttd").datepicker();
                changePage();
            });

            function changePage() {
                // update pager
                var curPage = parseInt($('.page-cur').text()) - 1;
                if (curPage < 1) {
                    $('.page-prev').addClass("invisible");
                } else {
                    $('.page-prev').removeClass("invisible");
                }
                $(".beritaLists .beritaboxes").html("Loading...");
                $.ajax({
                    url: "<?php echo site_url("service/getDataJSON"); ?>/artrecents",
                    method: "POST",
                    dataType: "json",
                    data: {
                        page: curPage,
                        type: "PJ"
                    },
                    success: function(data) {
                        $(".beritaLists .beritaboxes").html("");
                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                var berita = data[i];
                                var dates = berita.content_id.posted_date.split('-');
                                var monthString = $(".dtttd").datepicker("option", "monthNamesShort")[parseInt(dates[1]) - 1];
                                var dateString = parseInt(dates[2]);
                                var titleString = "<a href='<?php echo site_url("artikel/pj"); ?>/" + berita.id + "'>" + berita.content_id.title + "</a>";
                                var olehString = "oleh " + "<a href='<?php echo site_url("user"); ?>/" + berita.content_id.poster_id.id + "'>" + berita.content_id.poster_id.display_name + "</a>";
                                var newBerita = "";
                                newBerita += "<div class=\"beritabox\">";
                                newBerita += "<div style=\"margin-top: 0.75em;line-height: 1.5em;display: inline-block; width: 20px; height: 2.5em; padding-right: 5px; float: left; text-align: right; border-right: 1px solid #d4ccb0;\">" + monthString + "<br />" + dateString + "</div>";
                                newBerita += "<div style=\"margin-top: 0.6em;line-height: 1.8em;display: inline-block; width: 235px; min-height: 2.5em; padding-left: 4px; margin-bottom: 1.3em;\"><h1 style=\"margin: 0px;\">" + titleString + "</h1>" + olehString + "</div>";
                                newBerita += "<p>" + berita.content_id.short + "</p>";
                                newBerita += "</div>";
                                $(".beritaLists .beritaboxes").append(newBerita);
                            }
                        }
                    }
                });
            }
</script>